<template>
    <div>
        <!-- 内容区域 -->
        <div class="imginfo-container">
            <h3 class="title">
                {{imgInfo.title}}
            </h3>
            <p class="info">
                <span>发表时间:{{imgInfo.add_time | dateFormat}}</span>
                <span>点击：{{imgInfo.click}}次</span>
            </p>
            <hr>
            <div class="content" v-html="imgInfo.content"></div>
        </div>

        <!-- 缩略图区域 -->
        <div class="thumbs">
            <!-- <img v-for="(item,index) in thumImg" :key="index" :src="item.src" alt=""> -->
            <vue-preview  :slides="thumImg" @close="handleClose"></vue-preview>
        </div>


        <!-- 添加 评论 子组件区域 -->
        <div class="comment">
            <comment :newsid="imgid"></comment>
        </div>
    </div>
</template>

<script>
// 引入 评论 子组件
import comment from '../sub-components/Comment.vue'


export default {
    // 把点击的图片的id传过来
    props:['imgid'],
    data:function(){
        return {
            imgInfo:{},
            thumImg:[],
        };
    },
    created:function(){
        this.getImgInfo();
        this.getThumImg();
    },
    methods:{
        getImgInfo:async function(){
            const {data} = await this.$http.get('/api/getimageInfo/'+this.imgid);
            console.log(data);
            if(data.status===0) this.imgInfo=data.message[0];
        },
        getThumImg:async function(){
            const {data} = await this.$http.get('/api/getthumimages/'+this.imgid);
            console.log(data);
            // 挂载宽高属性
            data.message.forEach(item=>{
                item.w=600;
                item.h=400;
                item.msrc=item.src;
            })
            if(data.status===0) this.thumImg=data.message;
        },
        handleClose () {
            console.log('close event')
        },
    },
    // 注册 评论区域 子组件
    components:{
        comment
    }
}
</script>

<style lang="scss" scoped>
    .imginfo-container{
        .title{
            font-size: 14px;
            text-align: center;
            color: red;
            margin: 15px 0 ;
        }
        .info{
            color: blue;
            display: flex;
            justify-content: space-between;
            margin: 0 10px;
        }
        .content{
            text-indent: 2em;
            padding: 0 10px;
            color: rgb(80, 80, 80);
            font-size: 14px;
        }
    }
    .thumbs {
        padding-left: 5px;
        /deep/ .my-gallery{   //deep深层作用选择器
            display: flex;
            flex-wrap:wrap;//默认换行
            figure{
                width: 30%;
                margin: 5px;
                img{
                    width: 100%;
                    box-shadow: 0 0 8px #999;
                    border-radius: 5px;
                }
            }
        }
    }
</style>